import Search from './Search'
import { useDispatch, useSelector } from 'react-redux'
import Layout from './Layout'
import ProductItem from './ProductItem'
import { Col, Row, Typography } from 'antd'
import { useEffect } from 'react'
import { get_products } from '../../store/actions/product'
const { Title } = Typography


export default function Home() {
  const dispatch = useDispatch()
  const {sold, createdAt } = useSelector(state => state.products)
  useEffect(() => {
    dispatch(get_products({sortBy:'createdAt', order:'desc',limit:4}))
    dispatch(get_products({sortBy:'sold', order:'desc',limit:4}))
    // eslint-disable-next-line
  },[])
  return (
    <Layout title='拉勾严选-首页' subTitle='请浏览~'>
      <Search />
      <Title style={{marignToP: 10}} level={5}>最受欢迎</Title>
      <Row gutter={[16,16]}>
        {sold.map(product => (<Col span={6} key={product._id}><ProductItem product={product} /></Col>))}
      </Row>
      <Title style={{marignToP: 10}} level={5}>最新上架</Title>
      <Row gutter={[16,16]}>
      {createdAt.map(product => (<Col span={6} key={product._id}><ProductItem product={product} /></Col>))}
      </Row>
    </Layout>
  )
}
